<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./../css/styles/reset.css">
	<link rel="stylesheet" href="./../css/styles/bootstrap.css">
	<link rel="stylesheet" href="./../css/styles/animate.css">
	<link rel="stylesheet" href="./../css/pages/common.css">
	<link rel="stylesheet" href="../css/pages/service.css" />
	<title>家护帮</title>
</head>

<body>
	<div id="app">
		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：头部
            -->
		<div class="head-tab">
			<div class="tab-info container">
				<div class="tab-icon">
					<img src="../images/icon/logo.png" alt="">
				</div>
				<div class="tab-list">
					<ul class="list-ul">
						<li>
							<a href="../index.html">首页</a>
						</li>
						<li>
							<a href="partnership.html">城市合伙</a>
						</li>
						<li class="li-aver">
							<a href="service.html">企业服务</a>
						</li>
						<li>
							<a href="Recruitment.html">人才招聘</a>
						</li>
						<li>
							<a href="mediaReport.html">媒体报道</a>
						</li>
						<li>
							<a href="about.html">关于我们</a>
						</li>
					</ul>
					<div class="ipone">
						<div class="ipone-icon">
							<img src="../images/icon/ipone.png" alt="">
						</div>
						<div class="ipone-number">400-993-6300 400</div>
					</div>
				</div>
			</div>
		</div>
		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：正文内容
            -->

		<div class="wrapper container" ref="id">
			<div class="head-title">
				<img class="index-icon" src="../images/icon/zhu.png" alt="">
				<a href="../index.html">首页</a>
				<img class="left-icon" src="../images/icon/left.png" alt="">
				<a href="#">企业服务</a>
			</div>
			<div class="height70"></div>
			<div v-for="(item,index) in newList" :key="index">
				<div class="list">
					<div class="list-item" v-for="son in item" :key="son.name">
						<div class="item-icon">
							<img :src="son.imgUrl" alt="">
						</div>
						<div class="item-title">{{son.name}}</div>
						<div class="item-desc">{{son.desc}}</div>
					</div>
				</div>
			</div>
			<div class="height70"></div>
		</div>

		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：底部
            -->

		<div class="bottom">
			<div class="container">
				<div class="list-warpper">
					<a href="http://www.qq.com/" target="view_window">
						<img class="item-img" src="../images/logo/1.png" alt="">
					</a>
					<a href="http://www.ifeng.com/" target="view_window">
						<img class="item-img" src="../images/logo/2.png" alt="">
					</a>
					<a href="https://www.baidu.com/" target="view_window">
						<img class="item-img" src="../images/logo/3.png" alt="">
					</a>
					<a href="http://www.sina.com.cn/" target="view_window">
						<img class="item-img" src="../images/logo/4.png" alt="">
					</a>
					<a href="http://www.163.com/" target="view_window">
						<img class="item-img" src="../images/logo/5.png" alt="">
					</a>
					<a href="http://www.qq.com/" target="view_window">
						<img class="item-img" src="../images/logo/6.png" alt="">
					</a>
				</div>
				<div class="bottom-text">
					<p>
						家护帮服务平台 陕西省西安市碑林区长安北路一号2001室 技术支持：家护帮技术部 客服电话：400-993-6300
					</p>
					<p>
						Copyright 2016-2017 www.jiahubang.com All Rrights Reserved
					</p>
				</div>
			</div>
		</div>
	</div>
	<script src="../js/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				list: [{
					name: '月嫂',
					imgUrl: '../images/service/bj_img.png',
					desc: '婴儿生活护理、婴儿疾病护理、婴儿喂养、产妇生活护理、月子餐、产后康复',
				}, {
					name: '保姆',
					imgUrl: '../images/service/bm_img.png',
					desc: '婴儿生活护理、婴儿疾病护理、婴儿喂养、产妇生活护理、月子餐、产后康复',
				}, {
					name: '育儿嫂',
					imgUrl: '../images/service/ys_img.png',
					desc: '婴儿生活护理、婴儿疾病护理、婴儿喂养、产妇生活护理、月子餐、产后康复',

				}, {
					name: '油烟机清洗',
					imgUrl: '../images/service/yye_img.png',
					desc: '婴儿生活护理、婴儿疾病护理、婴儿喂养、产妇生活护理、月子餐、产后康复',

				}, {
					name: '住家陪护',
					imgUrl: '../images/service/yyj_img.png',
					desc: '婴儿生活护理、婴儿疾病护理、婴儿喂养、产妇生活护理、月子餐、产后康复',

				}, {
					name: '医院陪护',
					imgUrl: '../images/service/yyph_img.png',
					desc: '婴儿生活护理、婴儿疾病护理、婴儿喂养、产妇生活护理、月子餐、产后康复',

				}, {
					name: '保洁',
					imgUrl: '../images/service/zdg_img.png',
					desc: '婴儿生活护理、婴儿疾病护理、婴儿喂养、产妇生活护理、月子餐、产后康复',

				}, {
					name: '钟点工',
					imgUrl: '../images/service/zjph_img.png',
					desc: '婴儿生活护理、婴儿疾病护理、婴儿喂养、产妇生活护理、月子餐、产后康复',	

				}]
			},
			mounted: function () {
				this.$refs.id.style.minHeight = window.innerHeight - 267 + 'px'
			},
			computed: {
				newList: function () {
					return this.group(this.list, 4)
				}
			},
			methods: {
				tabClickTap: function (index) {
					this.num = index
				},
				group: function (array, subGroupLength) {
					var index = 0;
					var newArray = [];

					while (index < array.length) {
						newArray.push(array.slice(index, index += subGroupLength));
					}
					return newArray;
				}
			}
		})
	</script>
</body>

</html>